<template>
	<view>
		<view class="tip">我是孩子的？</view>
		<view class="explain">请选择您与孩子的关系</view>

		<view class="selectContent">
			<view class="item" v-for="(item , index) in familyList" :key="index" @click="selectFun(index)">
				<image
					class="toux"
					:src="item.icon"
					mode="scaleToFill"
				/>
				<text class="name">{{ item.name }}</text>

				<image
				class="select"
				:src="
                item.show
                  ? `${OSS_URL}/urm/bindDevice/dx.png`
                  : `${OSS_URL}/urm/bindDevice/nodx.png`
              "
					mode="scaleToFill"
				/>

			</view>
		</view>

		<view class="sub" @click="subFun">
			确定
		</view>

	</view>
</template>

<script  setup>
import { ref } from  "vue"
const OSS_URL = import.meta.env.VITE_OSS_HOST;
	const familyList = ref([
		{
			name:'爸爸',
			icon:`${OSS_URL}/urm/bindDevice/baba.png`,
			show:false
		},
		{
			name:'妈妈',
			icon:`${OSS_URL}/urm/bindDevice/mama.png`,
			show:false
		},
		{
			name:'爷爷',
			icon:`${OSS_URL}/urm/bindDevice/yeye.png`,
			show:false
		},
		{
			name:'nainai',
			icon:`${OSS_URL}/urm/bindDevice/nainai.png`,
			show:false
		},
		{
			name:'外公',
			icon:`${OSS_URL}/urm/bindDevice/wg.png`,
			show:false
		},
		{
			name:'外婆',
			icon:`${OSS_URL}/urm/bindDevice/waipo.png`,
			show:false
		},{
			name:'其他',
			icon:`${OSS_URL}/urm/bindDevice/qita.png`,
			show:false
		}
		
	])

	function selectFun(e){
		familyList.value[e].show = !familyList.value[e].show
	}

	function subFun(){
		uni.navigateTo({ url: './applyForBinding' })
	}
</script>

<style lang="scss" scoped>
	.tip{
		margin-top: 50upx;
		font-size: 34upx;
		color: rgba(51, 51, 51, 1);
		width: 100%;
		text-align: center;
	}
	.explain{
		font-size: 30upx;
		color: rgba(102, 102, 102, 1);
		margin-top: 20upx;
		width: 100%;
		text-align: center;

	}

	.selectContent{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 30upx;
		.item{
			width: 330upx;
			height: 160upx;
			display: flex;
			align-items: center;
			padding: 30upx;
			box-sizing: border-box;
			border-radius: 20upx;
			background-color: #fff;
			position: relative;

			.toux{
				width: 100upx;
				height: 100upx;
			}
			.name{
				font-size: 30upx;
				margin-left: 20upx;

			}

			.select{
				width: 30upx;
				height: 30upx;
				position: absolute;
				right: 30upx;
				top: 65upx;
			}
		}
	}

	.sub{
		width: 690upx;
		height: 90upx;
		border-radius: 20upx;
		color: #fff;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 120upx;
		background-color: rgba(97, 93, 255, 1);
		margin-left: 30upx;
	}
</style>
